<template>
  <main>
    
  </main>
  <el-container style="height: 100vh; margin: 0; padding: 0;">
    <el-aside width="200px" class="fixed-sidebar">
      <Sidebar :activeTab.sync="activeTab" />
    </el-aside>
    <el-container style="margin: 0; padding: 0;">
      <el-header class="fixed-header">
        <Header />
      </el-header>
      <el-main class="main-content">
        <el-tabs
          v-model="activeTab"
          type="card"
          closable
          @tab-remove="removeTab"
          class="custom-tabs"
        >


        <router-view></router-view>  <!--渲染子路由，仅在此处渲染才能正确加载地图-->


          <el-tab-pane
            v-for="item in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
            :closable="item.name !== 'Home'"
          >
          
            <div class="tab-content">
              
              <!-- <router-view :key="item.name" /> -->
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </el-container>

  
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Sidebar from './Sidebar.vue'
import Header from './Header.vue'

const router = useRouter()
const route = useRoute()

// 初始化 activeTab 和 editableTabs
const activeTab = ref<string>(localStorage.getItem('activeTab') || 'Home')
const editableTabs = ref<{ title: string; name: string; component: string }[]>([
  // 确保这里的初始项与路由配置中的 name 属性相匹配
  { title: '首页', name: 'Home', component: 'Home' },
])

// 添加标签页的函数
const addTab = (title: string, name: string, component: string) => {
  if (!editableTabs.value.some(tab => tab.name === name)) {
    editableTabs.value.push({ title, name, component })
  }
  activeTab.value = name
  localStorage.setItem('editableTabs', JSON.stringify(editableTabs.value))
}

// 移除标签页的函数
const removeTab = (targetName: string) => {
  const tabs = editableTabs.value.filter(tab => tab.name !== targetName)
  const activeName = tabs[0] ? tabs[0].name : 'Home'
  activeTab.value = activeName
  editableTabs.value = tabs
  localStorage.setItem('editableTabs', JSON.stringify(editableTabs.value))
  if (activeTab.value !== 'Home') {
    router.push({ name: activeTab.value })
  } else {
    router.push({ name: 'Home' })
  }
}

// 监听路由变化，更新标签页
router.afterEach((to) => {
  activeTab.value = to.name as string
  if (!editableTabs.value.some(tab => tab.name === to.name)) {
    addTab(to.meta.title as string, to.name as string, to.name as string)
  }
  localStorage.setItem('activeTab', to.name as string)
  localStorage.setItem('editableTabs', JSON.stringify(editableTabs.value))
})

watch(activeTab, (newTab) => {
  if (newTab) {
    router.push({ name: newTab })
    localStorage.setItem('activeTab', newTab)
  }
})

onMounted(() => {
  const storedTab = localStorage.getItem('activeTab')
  if (storedTab && storedTab !== 'Home') {
    router.push({ name: storedTab })
  } else {
    if (!editableTabs.value.some(tab => tab.name === 'Home')) {
      addTab('首页', 'Home', 'Home')
    }
    activeTab.value = 'Home'
    router.push({ name: 'Home' })
  }
})
</script>

<style scoped>
.el-container {
  height: 100%;
  margin: 0;
  padding: 0;
}

.fixed-sidebar {
  position: fixed;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  transition: width 0.5s ease; /* Adjusted transition speed */
}

.fixed-sidebar.collapsed {
  width: 60px;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 200px; /* 等于侧边栏的宽度 */
  right: 0;
  height: 50px;
  background-color: #ffffff;
  text-align: left;
  line-height: 50px;
  padding: 0 20px;
  font-size: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: left 0.5s ease; /* Adjusted transition speed */
}

.fixed-header.expanded {
  left: 60px; /* 收缩后侧边栏的宽度 */
}

.main-content {
  margin-left: 200px; /* 等于侧边栏的宽度 */
  margin-top: 50px; /* 等于header的高度 */
  height: calc(100vh - 50px); /* 减去 header 的高度 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.5s ease; /* Adjusted transition speed */
}

.main-content.expanded {
  margin-left: 60px; /* 收缩后侧边栏的宽度 */
}

.custom-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.custom-tabs .el-tabs__header {
  margin: 0;
  padding: 0;
}

.custom-tabs .el-tabs__content {
  flex: 1;
  overflow: auto;
  margin: 0;
  padding: 0;
}

.custom-tabs .el-tabs__item {
  color: #1f2d3d;
  font-weight: bold;
  padding: 10px;
  margin-right: 10px;
  border-radius: 4px;
}

.custom-tabs .el-tabs__item:hover {
  color: #409EFF;
}

.custom-tabs .el-tabs__header {
  border-bottom: none;
  margin-bottom: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tab-content {
  height: 100%;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
</style>
